@import "@site/styles/index";

.popper-page {
  .basic-demo {
    .za-cell__content {
      padding: r(60) 0;
      justify-content: center;
    }
  }

  @at-root {
    .custom-content,
    .custom-arrow-content {
      padding: r(6) r(12);
      background: #ddd;
      font-size: r(12);
      width: r(100);
      height: r(50);
      color: #333;
    }

    // 自定义箭头
    .custom-arrow-content {
      .za-popper__arrow {
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
      }

      &[x-placement^=top] {
        margin-bottom: r(10);

        .za-popper__arrow {
          bottom: r(-4);
          border-width: r(4) r(4) 0;
          border-top-color: #ddd;
        }
      }

      &[x-placement^=right] {
        margin-left: r(10);

        .za-popper__arrow {
          left: r(-4);
          border-width: r(4) r(4) r(4) 0;
          border-right-color: #ddd;
        }
      }

      &[x-placement^=bottom] {
        margin-top: r(10);

        .za-popper__arrow {
          top: r(-4);
          border-width: 0 r(4) r(4) r(4);
          border-bottom-color: #ddd;
        }
      }

      &[x-placement^=left] {
        margin-right: r(10);

        .za-popper__arrow {
          right: r(-4);
          border-width: r(4) 0 r(4) r(4);
          border-left-color: #ddd;
        }
      }
    }
  }

  // 显示方向
  .direction-demo {
    .za-button {
      width: r(60);
      margin-right: r(10);
      margin-bottom: r(10);
    }

    .za-cell__content {
      padding: r(15) 0;
      justify-content: center;
    }
  }
}
